<template>
  <div id="container">

    <div class="map">
      <logisticsMap></logisticsMap>
    </div>
    <div class="bottomContainer">
      <bottomBox></bottomBox>
    </div>

  </div>
</template>

<script setup lang="ts">
import bottomBox from "./bottomBox.vue"
import logisticsMap from './map.vue'
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  padding: 0 15px;
  box-sizing: border-box;

}

.map {
  flex: 8;
  width: 100%;
  margin-bottom: 20px;
}

.bottomContainer {
  flex: 3;
  width: 100%;
  margin-bottom: 12px;

}
</style>